<template>
  <div class="app-container">
    <div class="box">
      <!--<div class="box_content">
        <el-input placeholder="请输入课程号" style="width: 200px"></el-input>
      </div>-->
      <div class="box_content">
        <el-select v-model="LessName" placeholder="请选择学期" value="">
          <el-option v-for="item in querySemester" :label="item.semester_name" :value="item.semester_name"></el-option>
        </el-select>
      </div>
      <div class="box_content">
        <el-date-picker v-model="startTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss" type="date" placeholder="选择开始日期"></el-date-picker>
      </div>
      <div class="box_content">
        <el-date-picker v-model="endTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss" type="date" placeholder="选择结束日期"></el-date-picker>
      </div>
      <div class="box_content">
        <el-select v-model="defTime" placeholder="选择默认日期" value="">
          <el-option v-for="item in queryTableData" :label="item.timetable_name" :value="item.unid">{{item.timetable_name}}</el-option>
        </el-select>
      </div>
      <div class="box_content" style="text-align: right">
        <el-button type="primary" @click="queryScreenSemesterData">查询</el-button>
        <el-button @click="restLess">重置</el-button>
      </div>
    </div>
    <el-button type="primary" style="margin-right: 10px;margin-bottom: 10px;margin-top: 10px" @click="dialog1 = true">新增</el-button>说明：【起始日期】必须是每周一，【结束日期】必须是每周日。
    <el-table v-loading="loading" :data="queryData" border style="width: 100%">
      <el-table-column prop="semester_name" label="学期名称" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="start_time" label="起始日期" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="end_time" label="结束日期" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="timetable_name" label="作息时间" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column fixed="right" label="操作" width="145">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="primary" size="small">查看</el-button>
          <el-button type="success" size="small" @click="editSemester(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="新增学期" :visible.sync="dialog1" width="300px">
      <el-form ref="addData" :model="addData" :rules="rules" label-width="80px">
        <el-form-item label="学期名称" prop="semester_name">
          <el-input placeholder="请输入" v-model="addData.semester_name"></el-input>
        </el-form-item>
        <el-form-item label="起始日期" prop="start_time">
          <el-date-picker type="date" placeholder="选择日期" style="width: 100%;" format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="addData.start_time"></el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期" prop="end_time">
          <el-date-picker type="date" placeholder="选择日期" style="width: 100%;" format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="addData.end_time"></el-date-picker>
        </el-form-item>
        <el-form-item label="作息时间" prop="timetable_id">
          <el-select value="" placeholder="请选择" v-model="addData.timetable_id">
            <el-option v-for="item in queryTableData" :label="item.timetable_name" :value="item.unid">{{item.timetable_name}}</el-option>
          </el-select>
        </el-form-item>
        <div style="text-align: center">
          <el-button type="primary" @click="addSemester('addData')">提交</el-button>
        </div>
      </el-form>
    </el-dialog>
    <el-dialog title="编辑学期" :visible.sync="dialog2" width="300px">
      <el-form label-width="80px">
        <el-form-item label="学期名称">
          <el-input placeholder="请输入" v-model="addData.semester_name"></el-input>
        </el-form-item>
        <el-form-item label="起始日期">
          <el-date-picker type="date" placeholder="选择日期" style="width: 100%;" format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="addData.start_time"></el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期">
          <el-date-picker type="date" placeholder="选择日期" style="width: 100%;" format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="addData.end_time"></el-date-picker>
        </el-form-item>
        <el-form-item label="作息时间">
          <el-select value="" placeholder="请选择" v-model="addData.timetable_id">
            <el-option v-for="item in queryTableData" :label="item.timetable_name" :value="item.unid">{{item.timetable_name}}</el-option>
          </el-select>
        </el-form-item>
        <div style="text-align: center">
          <el-button type="primary" @click="editSemesterData">修改</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import { addSemester,addTimetableMain,queryTimetable,querySemesterData,queryTimetableById,querySemesterList,queryLessionList } from '@/api/studentRecruit.js'
  import * as dateFormat from 'element-ui'
    export default {
        name: 'index2',
      data() {
        return {
          semesterRow:null,
          defTime:null,
          startTime:null,
          endTime:null,
          LessName:null,
          querySemester:null,
          queryLession:null,
          loading:null,
          requestIdObj:{},
          dialog1:false,
          dialog2:false,
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }],
          addData:{
            semester_name:null,
            start_time:null,
            end_time:null,
            timetable_id:null,
          },
          queryTableData:null,
          queryData:null,
          rules: {
            semester_name: [
              { required: true, message: '请输入名称', trigger: 'blur,change' }
            ],
            start_time: [
              { required: true, message: '请输入排序', trigger: 'blur,change' }
            ],
            end_time: [
              { required: true, message: '请输入机构id', trigger: 'blur,change' }
            ],
            timetable_id: [
              { required: true, message: '请选择栏目id', trigger: 'blur,change' }
            ]
          },
        }
      },
      methods: {
        //编辑学期数据
        async editSemesterData(){
          console.log('semesterRow',this.semesterRow)
          let beginTime = new Date(this.addData.start_time)
          let endTime = new Date(this.addData.end_time)
          if (endTime <= beginTime){
            this.$message.error('结束日期必须大于起始日期')
          }else if(endTime > beginTime){
            console.log('addData',this.addData)
            let editData = {
              unid:this.semesterRow.unid,
              semester_name:this.addData.semester_name,
              start_time:this.addData.start_time,
              end_time:this.addData.end_time,
              timetable_id:this.addData.timetable_id,
            }
            let resData = await addSemester(editData)
            if(resData.code == 200){
              this.$message.success('编辑成功！')
              this.querySemesterData()
              this.dialog2 = false
            }else {
              this.$message.error('编辑失败！')
            }
          }
        },
        //编辑学期表
        editSemester(row){
          this.dialog2 = true
          console.log(row)
          this.semesterRow = row
          this.addData.semester_name = row.semester_name
          this.addData.start_time = row.start_time
          this.addData.end_time = row.end_time
          this.addData.timetable_id = row.timetable_id
        },
        //获取学期信息
        async querySemesterList(){
          let queryData = {}
          let resData = await querySemesterList(queryData)
          this.querySemester = resData.data
          console.log('获取学期信息',resData.data)
        },
        //获取课程信息
        async queryLessionList(){
          let queryData = {}
          let resData = await queryLessionList(queryData)
          this.queryLession = resData.data
          console.log('获取课程信息',resData.data)
        },
        //重置条件查询
        async restLess(){
          this.LessName = null
          this.defTime = null
          this.startTime = null
          this.endTime = null
          this.$message.success('重置成功！')
          this.querySemesterData()
        },
        //条件查询
        async queryScreenSemesterData(){
          console.log(this.LessName)
          console.log(this.startTime)
          console.log(this.endTime)
          console.log(this.defTime)
          if(this.LessName == null && this.defTime == null && this.startTime == null && this.endTime == null){
            this.$message.error('请输入要查询的条件！')
          }else {
            let queryData = {
              semester_name:this.LessName,
              timetable_id:this.defTime,
              start_time:this.startTime,
              end_time:this.endTime,
            }
            let resData = await querySemesterData(queryData)
            if(resData.code == 200){
              this.$message.success('查询成功！')
              this.queryData = resData.data
              console.log(resData)
            }else {
              this.$message.error('查询失败！')
            }
          }
        },
        handleClick(row) {
          console.log(row);
        },
        //查询学期表数据
        async querySemesterData(){
          this.loading = true
          let queryData = {}
          let resData = await querySemesterData(queryData)
          if(resData.code == 200){
            console.log('学期设置：',resData)
            this.queryData = resData.data
            this.$message.success('查询成功！')
            this.loading = false
          }else {
            this.$message.error('查询失败！')
          }
        },
        async queryTimetable(){
          let queryData = {

          }
          let resData = await queryTimetable(queryData)
          this.queryTableData = resData.data
        },
        //添加学期数据
        addSemester(addData){
          this.$refs[addData].validate((valid) => {
            if (valid) {
              let beginTime = new Date(this.addData.start_time)
              let endTime = new Date(this.addData.end_time)
              if (endTime <= beginTime){
                this.$message.error('结束日期必须大于起始日期')
              }else if(endTime > beginTime){
                console.log('addData',this.addData)
                addSemester(this.addData).then(resData => {
                  if (resData.code == 200){
                    this.$message.success('添加成功')
                    this.dialog1 = false
                    this.querySemesterData()
                  }
                })
              }
            } else {
              console.log(valid);
              return false;
            }
          });
        }
      },
      computed:{

      },
      created() {
        this.querySemesterData()
        this.queryTimetable()
        this.querySemesterList()
        this.queryLessionList()
      }
    }
</script>

<style scoped>
  .box {
    width: 100%;
    display: flex;
    flex-direction: row;
    /*//两侧对齐*/
    justify-content: space-between;
    /*//自动换行*/
    flex-wrap: wrap;
    /*//清除上下行的中间空隙*/
    align-content: flex-start;
  }

  .box_content {
    flex: 30 200px;
  }

  /*//解决最后一行的问题*/
  .box:after {
    content: '';
    width: 30%;
  }
</style>
